﻿<Page
    x:Class="CalciumTemplateApp.UI.HubView"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:CalciumTemplateApp.UI"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:calcium="using:Outcoder.UI.Xaml"
	xmlns:cm="using:Outcoder.ComponentModel"
    mc:Ignorable="d">

    <Page.Resources>
        <Style x:Key="TabsStylePivotStyle" TargetType="Pivot">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="Pivot">
                        <Grid
                            x:Name="RootElement"
                            HorizontalAlignment="{TemplateBinding HorizontalAlignment}"
                            VerticalAlignment="{TemplateBinding VerticalAlignment}"
                            Background="{TemplateBinding Background}">
                            <Grid.Resources>


                                <Style x:Key="BaseContentControlStyle" TargetType="ContentControl">
                                    <Setter Property="FontFamily" Value="Segoe UI" />
                                    <Setter Property="FontWeight" Value="SemiBold" />
                                    <Setter Property="FontSize" Value="15" />
                                    <Setter Property="Template">
                                        <Setter.Value>
                                            <ControlTemplate TargetType="ContentControl">
                                                <ContentPresenter
                                                    Margin="{TemplateBinding Padding}"
                                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                    Content="{TemplateBinding Content}"
                                                    ContentTemplate="{TemplateBinding ContentTemplate}"
                                                    ContentTransitions="{TemplateBinding ContentTransitions}"
                                                    OpticalMarginAlignment="TrimSideBearings" />
                                            </ControlTemplate>
                                        </Setter.Value>
                                    </Setter>
                                </Style>
                                <Style x:Key="TitleContentControlStyle" BasedOn="{StaticResource BaseContentControlStyle}" TargetType="ContentControl">
                                    <Setter Property="FontWeight" Value="SemiLight" />
                                    <Setter Property="FontSize" Value="24" />
                                </Style>

                                <!-- While used here to remove the spacing between header items, the PivotHeaderItem template can also be used to 
                                display custom 'selected' visuals -->
                                <Style TargetType="PivotHeaderItem">
                                    <Setter Property="Padding" Value="0" />
                                </Style>
                            </Grid.Resources>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="Orientation">
                                    <VisualState x:Name="Portrait">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotPortraitThemePadding}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="Landscape">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="TitleContentControl" Storyboard.TargetProperty="Margin">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource PivotLandscapeThemePadding}" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="NavigationButtonsVisibility">
                                    <VisualState x:Name="NavigationButtonsHidden" />
                                    <VisualState x:Name="NavigationButtonsVisible">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="Opacity">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="NextButton" Storyboard.TargetProperty="IsEnabled">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="Opacity">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PreviousButton" Storyboard.TargetProperty="IsEnabled">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="True" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="HeaderStates">
                                    <VisualState x:Name="HeaderDynamic" />
                                    <VisualState x:Name="HeaderStatic">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Header" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed" />
                                            </ObjectAnimationUsingKeyFrames>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="StaticHeader" Storyboard.TargetProperty="Visibility">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="Visible" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Grid.RowDefinitions>
                                <RowDefinition Height="Auto" />
                                <RowDefinition Height="*" />
                            </Grid.RowDefinitions>
                            <ContentControl
                                x:Name="TitleContentControl"
                                Margin="{StaticResource PivotPortraitThemePadding}"
                                Content="{TemplateBinding Title}"
                                ContentTemplate="{TemplateBinding TitleTemplate}"
                                IsTabStop="False"
                                Style="{StaticResource TitleContentControlStyle}"
                                Visibility="Collapsed" />
                            <Grid Grid.Row="1">
                                <Grid.Resources>
                                    <ResourceDictionary>
                                        <ResourceDictionary.ThemeDictionaries>
                                            <ResourceDictionary x:Key="Default">
                                                <SolidColorBrush x:Key="SystemControlPageBackgroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />
                                                <SolidColorBrush x:Key="SystemControlForegroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />
                                            </ResourceDictionary>
                                            <ResourceDictionary x:Key="Light">
                                                <SolidColorBrush x:Key="SystemControlPageBackgroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />
                                                <SolidColorBrush x:Key="SystemControlForegroundChromeMediumBrush" Color="{ThemeResource SystemChromeMediumColor}" />
                                            </ResourceDictionary>
                                            <ResourceDictionary x:Key="HighContrast">
                                                <SolidColorBrush x:Key="SystemControlPageBackgroundChromeMediumBrush" Color="{ThemeResource SystemColorWindowColor}" />
                                                <SolidColorBrush x:Key="SystemControlForegroundChromeMediumBrush" Color="{ThemeResource SystemColorButtonTextColor}" />
                                            </ResourceDictionary>
                                        </ResourceDictionary.ThemeDictionaries>

                                        <ControlTemplate x:Key="NextTemplate" TargetType="Button">
                                            <Border
                                                x:Name="Root"
                                                Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"
                                                BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}"
                                                BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}">
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal" />
                                                        <VisualState x:Name="PointerOver">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Pressed">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <FontIcon
                                                    x:Name="Arrow"
                                                    HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"
                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                    FontSize="12"
                                                    Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}"
                                                    Glyph="&#xE0E3;"
                                                    MirroredWhenRightToLeft="True"
                                                    UseLayoutRounding="False" />
                                            </Border>
                                        </ControlTemplate>
                                        <ControlTemplate x:Key="PreviousTemplate" TargetType="Button">
                                            <Border
                                                x:Name="Root"
                                                Background="{ThemeResource SystemControlBackgroundBaseMediumLowBrush}"
                                                BorderBrush="{ThemeResource SystemControlForegroundTransparentBrush}"
                                                BorderThickness="{ThemeResource PivotNavButtonBorderThemeThickness}">
                                                <VisualStateManager.VisualStateGroups>
                                                    <VisualStateGroup x:Name="CommonStates">
                                                        <VisualState x:Name="Normal" />
                                                        <VisualState x:Name="PointerOver">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                        <VisualState x:Name="Pressed">
                                                            <Storyboard>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Root" Storyboard.TargetProperty="Background">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightBaseMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="Arrow" Storyboard.TargetProperty="Foreground">
                                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltAltMediumHighBrush}" />
                                                                </ObjectAnimationUsingKeyFrames>
                                                            </Storyboard>
                                                        </VisualState>
                                                    </VisualStateGroup>
                                                </VisualStateManager.VisualStateGroups>
                                                <FontIcon
                                                    x:Name="Arrow"
                                                    HorizontalAlignment="Center"
                                                    VerticalAlignment="Center"
                                                    FontFamily="{ThemeResource SymbolThemeFontFamily}"
                                                    FontSize="12"
                                                    Foreground="{ThemeResource SystemControlForegroundAltMediumHighBrush}"
                                                    Glyph="&#xE0E2;"
                                                    MirroredWhenRightToLeft="True"
                                                    UseLayoutRounding="False" />
                                            </Border>
                                        </ControlTemplate>
                                    </ResourceDictionary>
                                </Grid.Resources>
                                <ScrollViewer
                                    x:Name="ScrollViewer"
                                    Margin="{TemplateBinding Padding}"
                                    VerticalContentAlignment="Stretch"
                                    BringIntoViewOnFocusChange="False"
                                    HorizontalScrollBarVisibility="Hidden"
                                    HorizontalSnapPointsAlignment="Center"
                                    HorizontalSnapPointsType="MandatorySingle"
                                    Template="{StaticResource ScrollViewerScrollBarlessTemplate}"
                                    VerticalScrollBarVisibility="Disabled"
                                    VerticalScrollMode="Disabled"
                                    VerticalSnapPointsType="None"
                                    ZoomMode="Disabled">
                                    <PivotPanel x:Name="Panel" VerticalAlignment="Stretch">
                                        <Grid x:Name="PivotLayoutElement" >
                                            <Grid.RowDefinitions>
                                                <RowDefinition Height="Auto" />
                                                <RowDefinition Height="*" />
                                            </Grid.RowDefinitions>

                                            <!-- By setting the column definitions to *,Auto,* allows the tabs to be centered by default -->
                                            <Grid.ColumnDefinitions>
                                                <ColumnDefinition Width="*" />
                                                <ColumnDefinition Width="Auto" />
                                                <ColumnDefinition Width="*" />
                                            </Grid.ColumnDefinitions>
                                            <Grid.RenderTransform>
                                                <CompositeTransform x:Name="PivotLayoutElementTranslateTransform" />
                                            </Grid.RenderTransform>

                                            <!--  This border is used as a backplate for the header area  -->
                                            <Border
                                                Grid.ColumnSpan="3"
                                                Background="{ThemeResource SystemControlPageBackgroundChromeMediumBrush}"
                                                BorderBrush="{ThemeResource SystemControlForegroundChromeMediumBrush}"
                                                BorderThickness="0,0,0,1" />

                                            <ContentPresenter
                                                x:Name="LeftHeaderPresenter"
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch"
                                                Content="{TemplateBinding LeftHeader}"
                                                ContentTemplate="{TemplateBinding LeftHeaderTemplate}" />
                                            <ContentControl
                                                x:Name="HeaderClipper"
                                                Grid.Column="1"
                                                HorizontalContentAlignment="Stretch"
                                                UseSystemFocusVisuals="True">
                                                <ContentControl.Clip>
                                                    <RectangleGeometry x:Name="HeaderClipperGeometry" />
                                                </ContentControl.Clip>
                                                <Grid Background="Transparent">
                                                    <PivotHeaderPanel x:Name="StaticHeader" Visibility="Collapsed" />
                                                    <PivotHeaderPanel x:Name="Header">
                                                        <PivotHeaderPanel.RenderTransform>
                                                            <TransformGroup>
                                                                <CompositeTransform x:Name="HeaderTranslateTransform" />
                                                                <CompositeTransform x:Name="HeaderOffsetTranslateTransform" />
                                                            </TransformGroup>
                                                        </PivotHeaderPanel.RenderTransform>
                                                    </PivotHeaderPanel>
                                                </Grid>
                                            </ContentControl>
                                            <Button
                                                x:Name="PreviousButton"
                                                Grid.Column="1"
                                                Width="20"
                                                Height="36"
                                                Margin="{ThemeResource PivotNavButtonMargin}"
                                                HorizontalAlignment="Left"
                                                VerticalAlignment="Top"
                                                Background="Transparent"
                                                IsEnabled="False"
                                                IsTabStop="False"
                                                Opacity="0"
                                                Template="{StaticResource PreviousTemplate}"
                                                UseSystemFocusVisuals="False" />
                                            <Button
                                                x:Name="NextButton"
                                                Grid.Column="1"
                                                Width="20"
                                                Height="36"
                                                Margin="{ThemeResource PivotNavButtonMargin}"
                                                HorizontalAlignment="Right"
                                                VerticalAlignment="Top"
                                                Background="Transparent"
                                                IsEnabled="False"
                                                IsTabStop="False"
                                                Opacity="0"
                                                Template="{StaticResource NextTemplate}"
                                                UseSystemFocusVisuals="False" />
                                            <ContentPresenter
                                                x:Name="RightHeaderPresenter"
                                                Grid.Column="2"
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch"
                                                Content="{TemplateBinding RightHeader}"
                                                ContentTemplate="{TemplateBinding RightHeaderTemplate}" />
                                            <ItemsPresenter x:Name="PivotItemPresenter" Grid.Row="1" Grid.ColumnSpan="3">
                                                <ItemsPresenter.RenderTransform>
                                                    <TransformGroup>
                                                        <TranslateTransform x:Name="ItemsPresenterTranslateTransform" />
                                                        <CompositeTransform x:Name="ItemsPresenterCompositeTransform" />
                                                    </TransformGroup>
                                                </ItemsPresenter.RenderTransform>
                                            </ItemsPresenter>
                                        </Grid>
                                    </PivotPanel>
                                </ScrollViewer>
                            </Grid>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
    </Page.Resources>

    <Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

        <Pivot ItemsSource="{x:Bind Model.ChildViewModels}" 
			   Style="{StaticResource TabsStylePivotStyle}">
			<Pivot.Resources>
				<DataTemplate x:Name="AboutViewModel">
                    <local:AboutView DataContext="{Binding}" />
				</DataTemplate>
                <DataTemplate x:Name="OptionsViewModel">
                    <local:OptionsView DataContext="{Binding}" />
                </DataTemplate>
            </Pivot.Resources>
            <Pivot.ItemTemplateSelector>
                <calcium:TypeTemplateSelector />
            </Pivot.ItemTemplateSelector>
			
			<Pivot.HeaderTemplate>
                <DataTemplate>
                    <local:PivotHeaderButton DataContext="{Binding}" Label="{Binding Title}" Glyph="{Binding Glyph}" />
				</DataTemplate>
			</Pivot.HeaderTemplate>
        </Pivot>
<!--        <TextBlock Text="{x:Bind Model.Strings.Page_Main_Title}" FontSize="20" VerticalAlignment="Bottom" />-->
    </Grid>
</Page>
